{% extends "base.html" %}
{% load static %}


{% block title %}
<title>晋哆咕-注册</title>
{% endblock %}


{% block css %}
<style>
    body {
        background: url("/static/img/bg.jpg") repeat;
    }
    .container {
        margin-top: 100px;
    }
    label {
        color: #333;
        font-size: 20px;
    }
    .logo_top {
        margin: 1em;
    }
    .logo_top_j {
        display: block;
        margin-right: auto;
        margin-left: auto;
    }
    .form-control {
        height: 40px;
        padding: 0px 10px;
        font-size: 20px;
        color: #337ab7;
    }
    .check_username {
        width: 16px;
        height: 16px;
        float: right;
        margin-right: 20px;
        margin-top: -143px;
    }
</style>
{% endblock %}


{% block body %}
<div class="logo_top">
    <h3 style="color: red">正版官网入口↘↘</h3>
    <a href="https://www.jjwxc.net/"><img class="logo_top_j" src="/static/img/注册-晋.png"></a>
</div>
<h1 style="color:hotpink">遇见——更好的自己^_^</h1>
<form action="" method="post">
    {% csrf_token %}
    <div class="form-group" style="background: #fff">
        {{ register_form.username.label_tag }}<span class="text-danger">*</span>
        {{ register_form.username }}
        {{ register_form.password.label_tag }}<span class="text-danger">*</span>
        {{ register_form.password }}
        {{ register_form.password2.label_tag }}<span class="text-danger">*</span>
        {{ register_form.password2 }}
        <span id="img_span" class="check_username img-update-no"></span>
    </div>
    <div class="form-group">
        {% if error %}
            <p class="alert alert-danger">{{ error }}</p>
        {% endif %}
    </div>
    <button style="color:green" type="submit" class="btn btn-info">注册</button>
</form>
{% endblock %}


{% block js %}
<script>
    let allContents = {{ all_contents|safe }};
    let username = document.getElementById('username');
    let img = document.getElementById('img_span');
    username.addEventListener('input', function () {
        let inputValue = this.value;
        if (allContents.includes(inputValue)) {
            img.style.backgroundImage = "url('{% static 'img/叉叉.png' %}')";
            } else {
            img.style.backgroundImage = "url('{% static 'img/对钩.png' %}')";
            }
    });
</script>
{% endblock %}

